<template>
  <div id=''>
    <h1>我是孙子组件</h1>

    <!-- 渲染demo4传递的props.foot -->
    <div>{{ props.foot2 }}</div>

    <div>爷爷的传家宝{{ heshibi }}</div>
    <button @click="edit">改变</button>

    <div>foo{{ foo?.name }}</div>
    <button @click="edit1">改变</button>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'vue',
}
</script>

<script lang='ts' setup>
import type { IDdemo } from '@/service/types/demo4Types';
import { ref, h, type Ref, isRef, reactive, isReactive, readonly, isReadonly, toRef, toRefs, unref, isProxy, watchEffect, inject } from 'vue';
import { myInjectionkey } from './keys';
const props = defineProps<{
  foot2: string
}>()

// 跨层级传递数据
// const heshibi = inject('heshibi')
const { heshibi } = inject(myInjectionkey) as { heshibi: Ref<string> }
const edit = () => {
  heshibi.value = 'hello world';
}

const foo = ref(inject<{ name: string }>('foo'))
const edit1 = () => {
  if (foo.value) {
    foo.value.name = '111111';
  }
}
</script>

<style lang='scss'></style>
